<template>
  <div>
    <a-menu-item @click="goBack" style="" class="back-menu">
      <arrow-left-outlined style="color: #0083ff" />
      <span>{{ permission.siteName }}</span>
    </a-menu-item>
    <a-menu-item key="StartAd">
      <i class="iconfont icon-qidongguanggao" :class="layoutState.side.collapsed ? 'w-34' : ''" />
      <span>启动广告</span>
    </a-menu-item>
    <a-menu-item key="DialogAd">
      <i class="iconfont icon-tanchuangguanggao" :class="layoutState.side.collapsed ? 'w-34' : ''" />
      <span>弹窗广告</span>
    </a-menu-item>
    <a-menu-item key="FloatingAd">
      <i class="iconfont icon-dibufucengguanggao" :class="layoutState.side.collapsed ? 'w-34' : ''" />
      <span>底部浮层广告</span>
    </a-menu-item>
    <a-menu-item-group key="SlideAd">
      <template #title v-if="!layoutState.side.collapsed" class="py-0" :style="isDark">按位置投放广告</template>
      <a-menu-item key="SlideAd">
        <i class="iconfont icon-lunboguanggao" :class="layoutState.side.collapsed ? 'w-34' : ''" />
        <span>轮播广告</span>
      </a-menu-item>
      <a-menu-item key="BannerAd">
        <i class="iconfont icon-hengfuguanggao" :class="layoutState.side.collapsed ? 'w-34' : ''" />
        <span>横幅广告</span>
      </a-menu-item>
    </a-menu-item-group>
    <a-menu-item-group key="BeforePlayAd">
      <template #title v-if="!layoutState.side.collapsed" class="py-0" :style="isDark">播放广告</template>
      <a-menu-item key="BeforePlayAd">
        <i class="iconfont icon-bofangqianguanggao" :class="layoutState.side.collapsed ? 'w-34' : ''" />
        <span>播放前广告</span>
      </a-menu-item>
      <a-menu-item key="PauseAd">
        <i class="iconfont icon-bofangzantingguanggao" :class="layoutState.side.collapsed ? 'w-34' : ''" />
        <span>播放暂停广告</span>
      </a-menu-item>
    </a-menu-item-group>
    <a-menu-item-group key="ColumnAd">
      <template #title v-if="!layoutState.side.collapsed" class="py-0" :style="isDark">底部专栏</template
      ><a-menu-item key="ColumnAd">
        <i class="iconfont icon-zhuanlanguanggao" :class="layoutState.side.collapsed ? 'w-34' : ''" />
        <span>专栏广告</span>
      </a-menu-item>
    </a-menu-item-group>
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import useStore from '@/stores'
import { computed, nextTick, ref } from 'vue'

import { layoutState } from '../../state'
import { useThemeStore } from '@/stores/modules/projectConfig'
const { navTheme } = useThemeStore()
const { permission } = useStore()
const isDark = computed(() => {
  return {
    backgroundColor: navTheme === 'dark' ? '' : '#E9E9E9',
    color: navTheme === 'dark' ? '#E9E9E9' : '#262626'
  }
})

const router = useRouter()
const goBack = () => {
  permission.setSiderType('ALL')
  nextTick(() => {
    router.push({ name: 'AdBank' })
  })
}
</script>

<style lang="less" scoped>
:deep(.ant-menu-submenu) {
  padding: 0 1px;
}
</style>
